<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选座</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(0)" class="layui-nav m-pl-sm m-pr-sm" lay-filter="">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>

</ul>

<!-- 内容 -->
<div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">
    <!-- 步骤条 -->
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div id="steps" style="margin-left: 10%;padding-top: 50px;"></div>
        </div>
    </div>
    <!-- 下面正文 -->
    <div style="margin-left: 10%; margin-right: 10%;  margin-top: 50px;">
        <div class="layui-panel">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                    <!-- 提示 -->
                    <div class="seat-example m-child-align-center">
                        <span class="seat seat-default"></span>
                        <span style="margin: 0 20px">可选座位</span>
                        <span class="seat seat-sold"></span>
                        <span style="margin: 0 20px">已售座位</span>
                        <span class="seat seat-pick"></span>
                        <span style="margin: 0 20px">已选座位</span>
                    </div>
                    <!-- 银屏 -->
                    <div class="m-child-align-center">
                        <div class="screen"></div>
                    </div>
                    <div class="m-tac">银屏中央</div>

                    <!-- 座位 -->
                    <div class="seat-content m-mt">
                        <!-- 一行开始 -->
                        <div th:each="row, state : ${seats}" class="layui-row">
                            <span style="width:10%;margin-right: 50px" th:text="${state.count < 10} ? '0' + ${state.count} : ${state.count}">1</span>
                            <div class="m-tac" style="display: inline-block; width: 90%;">
                                <span th:each="val, state2 : ${row}" th:data-row="${state.index}"
                                      th:data-col="${state2.index}" class="seat seat-select"
                                      th:classappend="${val == 0} ? 'seat-default' : 'seat-sold'"
                                        th:data-state="${val == 0} ? '0' : '2'"></span>
                            </div>
                        </div><!-- 一行结束 -->
                    </div>
                </div>
                <!-- 影院和影票信息 -->
                <div class="layui-col-xs12 layui-col-sm4 layui-col-md4"
                     style="padding: 10px;background-color: #eeeeee;">
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                            <img th:src="@{${movie.poster}}" width="100%">
                        </div>
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md8">
                            <div th:text="${movie.name}" class="m-tc-black m-ts m-tac m-mt">送你一朵小红花</div>
                            <div class="m-tac m-mt m-tc-black">
                                类型：
                                <span th:each="type : ${movie.types}" th:text="${type.name} + '/'">爱情</span>
                            </div>
                            <div class="m-tac m-tc-black">
                                时长：
                                <span th:text="${movie.length}">128</span>
                                分钟
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="m-mb-s m-mt">
                            影院：
                            <span class="m-tc-black" th:text="${cinema.name}">万达影城（经开万达广场店）</span>
                        </div>
                        <div class="m-mb-s">
                            影厅：
                            <span th:text="${sessionVO.hall.name}" class="m-tc-black">1号激光厅</span>
                        </div>
                        <div class="m-mb-s">
                            版本：
                            <span th:text="${sessionVO.language}" class="m-tc-black">国语</span>
                        </div>
                        <div class="m-mb-s">
                            场次：
                            <span class="m-tc-black">
                                <span th:text="${#dates.format(sessionVO.date, 'yyyy-MM-dd')}">2023-11-24 </span>
                                <span th:text="${sessionVO.movieRuntime.name}">下午1点场</span>
                            </span>
                        </div>
                        <div class="m-mb-s">
                            票价:￥
                            <span id="span-price" class="m-tc-black" th:text="${sessionVO.price}">123</span>
                            / 张
                        </div>
                        <div class="m-mb-s">
                            座位：
                            <span id="seatSelectedContainer" class="m-tc-black">
                            </span>
                        </div>
                        <div class="m-mb-s m-ts-normal">
                            总价:
                            <span class="m-tc-red">￥</span>
                            <span id="spanTotalPrice" class="m-tc-red">
                                    0
                            </span>
                        </div>
                    </div>
                    <div class="layui-row m-tac">
                        <button id="buyBtn" class="layui-btn layui-btn-normal">提交订单</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $(function (){
        layui.extend({steps: '[[@{/lib/layui/extends/steps/steps}]]'});
        layui.use('steps', function () {
            var steps = layui.steps;
            steps.render({
                ele: '#steps',
                data: [
                    {'title': "第一步", "desc": "选择影片场次"},
                    {'title': "第二步", "desc": "选择座位"},
                    {'title': "第三步", "desc": "付款"},
                    {'title': "第四步", "desc": "取票观影"}
                ], //desc 不是必须
                //current: 2 //默认为第几步
            });
            steps.next(); //下一步
        });
        var totalPrice = 0.0
        var price = "[[${sessionVO.price}]]"
        $(".seat-select").click(function (){
            if($(this).hasClass('seat-sold')){
                return
            }
            let row = $(this).data('row') + 1
            let col = $(this).data('col') + 1
            if($(this).hasClass('seat-default')){
                //追加座位标签
                $("#seatSelectedContainer").append(
                    "<span data-row='" + row + "'" + " data-col='" + col + "'"+ " style='margin-right: 10px; margin-top: 10px' class=\"seat-label layui-badge layui-bg-green\">" +
                     row +"排" + col +"座" +
                    "</span>")
                //总价
                totalPrice += parseFloat(price)
            }else{
                //移除座位标签
                let query = "span.seat-label[data-row=" + row + "][data-col=" + col + "]"
                $(query).remove()
                totalPrice -= parseFloat(price)
            }
            //切换样式
            $(this).toggleClass('seat-default')
            $(this).toggleClass('seat-pick')
            //总价
            $("#spanTotalPrice").text(totalPrice)
        })
        //提交订单
        $("#buyBtn").click(function (){
            var pickSeat = $(".seat.seat-pick")
            let pickSeatList = []
            $.each(pickSeat, function (){
                let r = $(this).data('row')
                let c = $(this).data('col')
                pickSeatList.push([r, c])
            })
            pickSeatList.shift()
            let jsonStr = JSON.stringify(pickSeatList)
            console.log(jsonStr)
            $.ajax({
                url: '[[@{/chooseSeat}]]',
                type: 'put',
                data: {
                    sessionId: '[[${sessionVO.id}]]',
                    seats: jsonStr
                },
                success: function (response) {
                    if (response.status == 'success') {
                        window.location.href = "[[@{/pay}]]"
                    } else {
                        layer.msg('操作失败')
                    }
                },
                error: function (response) {
                    layer.msg('未知错误')
                }
            })
        })
    })

</script>
</body>

</html>